<template>
  <div class="power-view">
    <h1 class="header"></h1>
    <div class="left-top">
      <PieEcharts :echartDatas="chargingPile"></PieEcharts>
    </div>
    <div class="left-bottom">
      <LineEcharts :echartDatas="processMonitoring"></LineEcharts>
    </div>

    <div class="right-top">
      <right-top-panel :panelItems="chargingTop4" :percentage="percentage"></right-top-panel>
    </div>

    <div class="right-center">
      <bar-echarts :echartDatas="chargingStatistics"></bar-echarts>
    </div>
    <div class="right-bottom">
      <right-bottom-svg :dots="exceptionMonitoring"></right-bottom-svg>
    </div>

    <div class="center">
      <center-svg></center-svg>
    </div>
    <div class="bottom">
      <bottom-panel :panelItems="dataAnalysis"></bottom-panel>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { usePowerViewStore } from '@/store/modules/power-view'

import {
  LineEcharts,
  PieEcharts,
  RightBottomSvg,
  CenterSvg,
  RightTopPanel,
  BottomPanel,
  BarEcharts,
} from '@/components/page-echarts/index'

const powerViewStore = usePowerViewStore()
powerViewStore.powerViewDataAction()
// 使用 storeToRefs 获取所有响应式状态
const {
  chargingPile,
  processMonitoring,
  chargingStatistics,
  exceptionMonitoring,
  dataAnalysis,
  chargingTop4,
  percentage,
} = storeToRefs(powerViewStore)

// import {
//   chargingPileData,
//   processMonitoringData,
//   chargingStatisticsData,
//   exceptionMonitoringData,
//   dataAnalysisData,
//   chargingTop4Data,
// } from './config/home-data'
// 充电桩饱和比例
// const chargingPile = ref(chargingPileData)
// // 流程监控
// const processMonitoring = ref(processMonitoringData)
// // 充电桩数据分析
// const chargingStatistics = ref(chargingStatisticsData)
// // 异常监控
// const exceptionMonitoring = ref(exceptionMonitoringData)
// // 充电桩数据分析
// const dataAnalysis = ref(dataAnalysisData)
// // 充电桩Top4占比
// const chargingTop4 = ref(chargingTop4Data)
// const percentage = ref(0)
</script>

<style lang="scss" scoped>
.power-view {
  /* 定位 */
  position: absolute;
  width: 100%;
  height: 100%;
  /* 背景 */
  background-image: url(@/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.header {
  /* 定位 */
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 56px;

  /* 背景 */
  background-image: url(@/assets/images/bg_header.svg);
  background-repeat: no-repeat;
}

.left-top {
  /* 定位 */
  position: absolute;
  top: 116px;
  left: 16px;
  width: 536px;
  height: 443px;
  /* 背景 */
  background-image: url(@/assets/images/bg_left-top.svg);
  background-repeat: no-repeat;
}

.left-bottom {
  /* 定位 */
  position: absolute;
  bottom: 49px;
  left: 16px;
  width: 536px;
  height: 443px;
  /* 背景 */
  background-image: url(@/assets/images/bg_left_bottom.svg);
  background-repeat: no-repeat;
}

.right-top {
  position: absolute;
  right: 17px;
  top: 96px;
  width: 519px;
  height: 327px;

  background-image: url(../assets/images/bg_right_top.svg);
  background-repeat: no-repeat;
}
.right-center {
  position: absolute;
  right: 17px;
  top: 443px;
  width: 519px;
  height: 327px;

  background-image: url(../assets/images/bg_right_center.svg);
  background-repeat: no-repeat;
}
.right-bottom {
  position: absolute;
  right: 17px;
  bottom: 49px;
  width: 519px;
  height: 242px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url(../assets/images/bg_right_bottom.svg);
  background-repeat: no-repeat;
}

.center {
  position: absolute;
  right: 540px;
  bottom: 272px;
  width: 823px;
  height: 710px;

  /* border: 5px solid pink; */
}

.bottom {
  position: absolute;
  right: 540px;
  bottom: 49px;
  width: 823px;
  height: 209px;

  background-image: url(../assets/images/bg_bottom.svg);
  background-repeat: no-repeat;
}
</style>
